<template>
  <view class="ask-detail">
    <view class="faq_goods" @click="onDetail">
          <u-image width="100" height="100" :src="askDetail.goods_img" />
          <view class="faq_goods_info_name">{{ askDetail.goods_name }}</view>
        <u-icon name="arrow-right" color="#909399"></u-icon>
    </view>
    <view class="faq_question">
      <view class="faq_question_wrap">
        <view class="faq_question_head">
          <text v-if="askDetail.anonymous === 'NO'">用户{{ askDetail.member_name }}的提问：</text>
          <text v-else>匿名用户的提问：</text>
          <text class="faq_question_head_time">{{ askDetail.create_time | unixToDate }}<i class="faq_question_head_more"></i></text>
        </view>
        <view class="faq_question_desc">{{askDetail.content}}</view>
      </view>
    </view>
    <view class="faq_answers">
      <view class="faq_answers_num">共{{ askDetail.reply_num }}个回答</view>
      <view class="faq_answers_list">
        <view v-if="finished && !replyList.length && askDetail.reply_status === 'NO'" class="no-data">暂无回复</view>
        <view v-else>
          <view v-if="askDetail.reply_status === 'YES'">
            <view class="faq_answers_list_head seller-reply">
              <text class="faq_answers_list_status">{{ askDetail.reply_time | unixToDate }}</text>
              <text>商家回复：</text>
            </view>
            <view class="faq_answers_list_desc" style="overflow: hidden;">{{ askDetail.reply }}</view>
          </view>
          <view v-for="(reply, index) in replyList" :key="index">
            <view class="faq_answers_list_head">
              <text class="faq_answers_list_status">{{ reply.reply_time | unixToDate }}</text>
              <text v-if="reply.anonymous === 'NO'">用户{{ reply.member_name }}说：</text>
              <text v-else>匿名用户说：</text>
            </view>
            <view class="faq_answers_list_desc" style="overflow: hidden;">{{ reply.content }}</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import * as API_Members from '@/api/members.js'
  export default {
    name: 'ask-detail',
    data() {
      return {
        loading: false,
        finished: false,
        ask_id: '',
        goods_id: '',
        /** 咨询详情信息 */
        askDetail:'',

        params: {
          page_no: 0,
          page_size: 10
        },

        replyList: []
      }
    },
    mounted() {
      this.GET_AskDetail()
    },
    methods: {
      /** 当页数发生改变时 */
      onLoad(options) {
          // console.log('options',options)
          this.ask_id = options.ask_id
          this.goods_id = options.goods_id
        this.params.page_no += 1
        this.GET_AskReplyList()
      },
      /** 跳转商品详情页 */
      onDetail() {
          this.navigateTo(`/goods-module/goods?goods_id=${this.askDetail.goods_id}`)
      },
      /** 获取问题回复列表 */
      GET_AskReplyList() {
        API_Members.getGoodsAskReplys(this.ask_id, this.params).then(response => {
          this.loading = false
          const { data } = response
          if (!data || !data.length) {
            this.finished = true
          } else {
            this.replyList.push(...data)
          }
        }).catch(() => { this.loading = false })
      },

      /** 获取问题详情信息 */
      GET_AskDetail() {
        API_Members.getAskDetail(this.ask_id).then(response => {
           this.askDetail = response
        //   const { data } = response
        //   this.askDetail.push(...data)
        //   this.mescroll.endBySize(data.length, response.data_total)
         })
      }
    }
  }
</script>
<style type="text/scss" lang="scss" scoped>
    page{
        background-color: #fff;
    }
  .faq_goods {
    background-color: #fff;
    padding: 20rpx;
    display: flex;
    flex-direction:row;
    .faq_goods_info_name {
      flex:1;
      padding-left: 10rpx;
      color: #333;
      height: 36rpx;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
  .faq_goods_cover {
    position: absolute;
    top: 20rpx;
    left: 20rpx;
    width: 50rpx;
    height: 50rpx;
    overflow: hidden;
  }
  .faq_goods_cover img {
    width: 120rpx;
    flex: 0 0 120rpx;
    height: 120rpx;
    margin-right: 20rpx;
    border-radius: 12rpx;
  }
  .faq_goods.type_slim .faq_goods_info {
    margin-left: 60rpx;
    padding: 7rpx 0;
  }
  .faq_question {
    padding: 20rpx;
    background-color: #fff;
  }
  .faq_question_wrap {
    position: relative;
    padding:20rpx;
    background-color: #f2f2f7;
    border-radius: 2rpx;
  }
  .faq_question_wrap::before {
    content: "";
    position: absolute;
    top: -10rpx;
    left: 32rpx;
    width: 0;
    height: 0;
    border-width: 5rpx;
    border-color: transparent transparent #f2f2f7;
    border-style: dashed dashed solid;
  }
  .faq_question_head {
    position: relative;
    height: 50rpx;
    line-height: 50rpx;
    color: #666;
  }
  .faq_question_head_time {
    position: absolute;
    top: 0;
    right: 0;
    color: #999;
  }
  .faq_question_desc {
    position: relative;
    padding-left: 50rpx;
    color: #333;
    font-weight: 700;
    word-break: break-all;
  }
  .faq_question_desc::before {
    content: "Q";
    display: inline-block;
    margin: -2rpx 10rpx 0 -40rpx;
    width: 30rpx;
    height: 30rpx;
    line-height: 30rpx;
    color: #fff;
    font-size: 14rpx;
    font-weight: 400;
    background-color: #ff9600;
    text-align: center;
    border-radius: 2rpx;
    vertical-align: middle;
  }
  .faq_answers_num {
    padding: 0 20rpx;
    height: 60rpx;
    line-height: 60rpx;
    color: #666;
    background-color: #e8e8ed;
  }
  .faq_answers_list {
    padding: 0 10rpx;
    background-color: #fff;
  }
  .faq_answers_list li:not(:last-child)::after {
    content: "";
    position: absolute;
    z-index: 1;
    pointer-events: none;
    background-color: #ddd;
    height: 1rpx;
    left: 0;
    right: 0;
    bottom: 0;
  }
  .faq_answers_list li {
    position: relative;
    padding-bottom: 12rpx;
  }
  .faq_answers_list_head {
    position: relative;
    padding: 15rpx 0;
    color: #666;
  }
  .faq_answers_list_status {
    display: inline-block;
    padding: 0 5rpx;
    height: 40rpx;
    line-height: 40rpx;
    vertical-align: middle;
    border-radius: 1rpx;
    float: right;
    color: #999;
  }
  .faq_answers_list_desc {
    position: relative;
    margin-bottom: 10rpx;
    padding-left: 20rpx;
    color: #333;
    word-break: break-all;
  }
  .seller-reply::before {
    content: "S";
    display: inline-block;
    margin-right: 6rpx;
    width: 30rpx;
    height: 30rpx;
    line-height: 30rpx;
    color: #fff;
    background-color: #c41818;
    text-align: center;
    border-radius: 2rpx;
    vertical-align: middle;
  }
  .faq_answers_list_desc::before {
    content: "A";
    display: inline-block;
    margin: -2rpx 5rpx 0 -20rpx;
    width: 30rpx;
    height: 30rpx;
    line-height: 30rpx;
    color: #fff;
    font-size: 14rpx;
    background-color: #18c461;
    text-align: center;
    border-radius: 2rpx;
    vertical-align: middle;
  }
  .faq_answers_list_time {
    margin-left: 20rpx;
    color: #999;
    font-size: 10rpx;
  }
  .no-data {
    height: 100rpx;
    line-height: 100rpx;
    text-align: center;
  }
</style>


